<template>
  <div :id="elId" class="pie_chart">
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { v4 as uuidv4 } from 'uuid';

export default {
  props:['type','data'],
  data () {
      return {
        elId: '',
        types: ['期刊','会议','专著','其它'],
      };
    },
  methods: {
    myEcharts() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById(this.elId));

      // 指定图表的配置项和数据
      var option = {
        title:  [
        {
            text: this.types[this.type],
            x: 'center',
            top: '55%',
            textStyle: {
                color: 'rgb(62, 62, 179)',
                fontSize: 12,
                fontWeight: '400',
                fontFamily: "Microsoft YaHei",
            },
        },
        {
            text: this.data+'%',
            x: 'center',
            y: 'center',
            textStyle: {
                fontSize: 20,
                color: 'rgb(62, 62, 179)',
                fontFamily: 'DINAlternate-Bold, DINAlternate',
                foontWeight: '600',
            },
        },
    ],
        angleAxis: {
          max: 100,
          // 隐藏刻度线
          show: false,
          startAngle: 90,
        },
        radiusAxis: {
          type: "category",
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        polar: {
          radius: "100%", //图形大小
        },
        series: [
          {
            type: "bar",
            data: [this.data],
            showBackground: true,
            roundCap: true,
            backgroundStyle: {
              color: "rgb(230, 230, 230)",
            },
            coordinateSystem: "polar",
            barWidth: 10,
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgb(93, 93, 190)",
                    },
                    {
                      offset: 1,
                      color: "rgb(212, 212, 255)",
                    },
                  ],
                  global: false,
                },
              },
            },
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
  mounted() {
    this.myEcharts();
  },
  created(){
      this.elId = uuidv4() //获取随机id
    },
};
</script>

<style scoped>
.pie_chart {
  width: 200px;
  height: 200px;
  /* background-color: rgb(212, 212, 255); */
}
</style>